<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">分组类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="value"
				           placeholder="分组类型"
				           @change="searchGroup"
				           left
				           size="small"
				           clearable>
					<el-option v-for="item in typeCombo"
					           :label="item.label"
					           :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="19"
			        style="text-align: right;margin-left: -20px;">
				<el-button type="primary"
				           size="small"
				           v-on:click="msgAdd">新增</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click="msgEdit">编辑</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click="startResRole">启用</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click="stopResRole">停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList"
				          stripe
				          border
				          @selection-change="handleSelectionChange">
					<el-table-column type="selection"
					                 width="60"
					                 fixed>
					</el-table-column>
					<el-table-column prop="type"
					                 label="角色"
					                 :formatter="levelCov"></el-table-column>
					<el-table-column prop="groupName"
					                 label="名称"></el-table-column>
					<el-table-column prop="groupDesc"
					                 label="群组描述"></el-table-column>
					<el-table-column prop="companyId"
					                 label="所属公司"
					                 :formatter="deptCov"></el-table-column>
					<el-table-column prop="status"
					                 label="状态"
					                 :formatter="statusCov"
					                 width="120">
					</el-table-column>
					<!--<el-table-column label="操作" width="180">
							<template scope="scope">
								<el-tooltip class="item" effect="light" content="编辑" placement="top">
									<el-button type="primary" size="mini" class="iconfont icon-dingdan" @click.native.prevent="msgEdit(scope.$index)"></el-button>
								</el-tooltip>
								<el-tooltip class="item" effect="light" content="启用" placement="top">
									<el-button type="info" size="mini" class="iconfont icon-kaishi" @click.native.prevent="startResRole(scope.$index)"></el-button>
								</el-tooltip>
								<el-tooltip class="item" effect="light" content="停用" placement="top">
									<el-button type="warning" size="mini" class="iconfont icon-stop" @click.native.prevent="stopResRole(scope.$index)"></el-button>
								</el-tooltip>
							</template>
						</el-table-column>-->
				</el-table>
				<el-pagination small
				               @size-change="handleSizeChange"
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--
	        	作者：1813180149@qq.com
	        	时间：2017-02-22
	        	描述：新增编辑界面
	        -->
		<el-dialog title="提示信息"
		           v-model="groupFormShow">
			<!--<el-form :model="msgFormData" ref="msgForm" :rules="msgRule" label-width="100px">-->
			<el-form :model="groupFormData"
			         ref="groupForms"
			         :rules="groupRule"
			         label-width="100px">
				<el-col :span="24">
					<el-form-item label="角色:"
					              prop="type">
						<el-select v-model="groupFormData.type"
						           size="small"
						           placeholder="请选择">
							<el-option v-for="item in typeCombo"
							           :label="item.label"
							           :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="名称:"
					              prop="groupName">
						<el-input size="small"
						          placeholder="请输入内容"
						          v-model="groupFormData.groupName">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="分组描述:"
					              prop="groupDesc">
						<el-input size="small"
						          placeholder="请输入内容"
						          v-model="groupFormData.groupDesc">
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="groupFormShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveGroup">提 交</el-button>
			</div>
	
		</el-dialog>
		<!--
	        	描述：编辑界面结束
	        -->
	
	</div>
</template>
<script>
export default {
	data() {
		return {
			//分组类型
			msgNameEdit: false,
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//				options: [{
			//						value: "选项1",
			//						label: "SA"
			//					},
			//					{
			//						value: "选项2",
			//						label: "客服"
			//					},
			//					{
			//						value: "选项3",
			//						label: "保险"
			//					}
			//				],
			//类型
			typeCombo: [],
			//类型转换
			levelConvertData: {},
			//字典转换值
			deptConvertData: {},
			//表单初始值
			emptyData: {
				id: '',
				groupName: '',
				groupDesc: '',
				type: '',
				status: '1',
				createTime: 0,
				createUser: '',
				updateTime: 0,
				updateUser: '',
				companyId: '',
			},
			//表单数据
			groupFormData: {
				id: '',
				groupName: '',
				groupDesc: '',
				type: '',
				status: '1',
				createTime: 0,
				createUser: '',
				updateTime: 0,
				updateUser: '',
				companyId: '',
			},
			//分组类型
			value: '',
			groupFormShow: false,
			//校验规则
			groupRule: {
				type: [{
					required: true,
					message: '请选择类型',
					trigger: 'blur'
				}],
				groupName: [{
					required: true,
					message: '请输入分组名称',
					trigger: 'blur'
				}],
			},
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//选中的列
			multipleSelection: []
		}
	},
	methods: {
		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
		},
		//查询
		resRoleQuery: function () {
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/group/page', //url
				params: { //发送的参数
					type: this.$data.value,
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量

				}
			})
				.then(function (resp) {
					resp.data.total = parseInt(resp.data.total);
					//es5新写法
					this.$data.tableData = resp.data;
				}, function (error) {

				})
		},
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.resRoleQuery();
		},
		msgAdd: function () {
			this.$data.groupFormData = Object.assign(this.$data.groupFormData, this.$data.emptyData, );
			this.$data.groupFormShow = true;
			//this.$prompt('请选择信息')
		},
		msgEdit: function () {
			if (this.$data.multipleSelection.length == 1) {
				//debugger;
				var resRoleData = this.$data.multipleSelection[0];
				this.$http.get(this.API_ROOT + '/crm/group/info', {
					params: {
						id: resRoleData.id,
					}
				}).then((response) => {
					this.$data.groupFormData = Object.assign(this.$data.groupFormData, response.data.data);
				}, (response) => {

				});
				this.$data.groupFormShow = true;
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		stopResRole: function (index) {
			if (this.$data.multipleSelection.length == 1) {
				//debugger;
				var data = this.$data.multipleSelection[0];
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/group/stop',
					params: {
						id: data.id,
					}
				}).then(function (resp) {
					if (resp.data.success) {
						this.$message(resp.data.msg);
						//this.resRoleQuery(this.$data.curTreeDeptId);
						//this.$data.groupFormShow = false;
						this.resRoleQuery();
					} else {
						this.$message.error(resp.data.msg);
					}
				}, function (error) {

				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		startResRole: function (index) {
			if (this.$data.multipleSelection.length == 1) {
				//debugger;
				var data = this.$data.multipleSelection[0];
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/group/start',
					params: {
						id: data.id,
					}
				}).then(function (resp) {
					if (resp.data.success) {
						this.$message(resp.data.msg);
						this.resRoleQuery();
					} else {
						this.$message.error(res.data.msg);
					}
				}, function (error) {

				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//分组类型解析
		levelCov: function (row, column) {
			return this.$data.levelConvertData[row.type];
		},
		//组织机构
		deptCov: function (row, column) {
			return this.$data.deptConvertData[row.companyId];
		},
		//状态转换
		statusCov: function (row, column) {
			return row.status == "0" ? '已停用' : '已启用';
		},
		searchGroup: function (val) {
			//debugger;
			this.resRoleQuery(val);
		},
		saveGroup: function () {
			//debugger;
			this.$refs.groupForms.validate(function (valid) {

				debugger;
				if (valid) {
					debugger;
					this.$http.post(this.API_ROOT + '/crm/group/save', this.$data.groupFormData)
						.then(resp => {
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.resRoleQuery();
								this.$data.groupFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));

			//debugger;
			//				this.$refs.groupForm.validate(function(valid){
			//					debugger;
			//					if(valid){
			//						this.$http.post(this.API_ROOT + '/crm/group/save',this.$data.groupFormData)
			//						.then(resp => {
			//							if(resp.data.success){
			//								this.$message(resp.data.group);
			//								this.$data.groupFormShow = false;
			//							}
			//							else{
			//								this.$message.error(resp.data.group);
			//							}
			//						},resp => {
			//
			//							});
			//					}
			//						return false;
			//				}.bind(this));
		},
		levelCovert: function () {
			this.$http.get(this.API_ROOT + '/rbac/role/convert', {
				params: {
					//group: "groupType"
				}
			}).then((response) => {
				this.$data.levelConvertData = response.data;
			}, (response) => { });
		},
		queryDeptCovert: function () {
			this.$http.get(this.API_ROOT + '/rbac/dept/convert', {
				params: {
					root: "0",
					type: ""
				}
			}).then((response) => {

				this.$data.deptConvertData = response.data;

			}, (response) => { });
		}
	},
	//表单创建时执行
	created: function () {
		//列表查询
		this.resRoleQuery();
		//查询部门转换
		this.queryDeptCovert();
		//查询类型转换
		this.levelCovert();
		//查询分组类型
		this.searchGroup();
		//获取品牌厂下拉
		this.$http.get(this.API_ROOT + '/crm/config/roleCombo', {
			params: {
				//group: "msgType"
			}
		}).then((response) => {
			// success callback
			this.$data.typeCombo = response.data;
		}, (response) => {
			// error callback
		});
	}
}
</script>